<template>
	<z-paging class="zPagingCircle" ref="paging" @onRefresh="onRefresh" @query="query" v-model="list" @scroll="scroll"
		:empty-view-style="{ 'margin-bottom': '100rpx' }">
		<view class="container">
			<swiper :options="options" @handleClick="handleClick" v-for="it in list" style="height: 235rpx;"
				:data-id="it.id">
				<view class="cell flex-row">
					<image :src="it.logo" class="avatar"></image>
					<view class="flex-1">
						<view class="text1">{{it.name}}</view>
						<view class="text2">{{it.num_people}}&nbsp;位朋友</view>
						<view class="intro">
							{{it.description || ''}}
						</view>
						<view class="intro" v-if="it.time" style="margin-top: 10rpx;">
							入圈到期时间：{{it.time}}
						</view>
					</view>
				</view>
			</swiper>
		</view>
	</z-paging>
</template>

<script>
	import swiper from './swiper.vue';
	import {
		circle_operation
	} from '@/common/http/api.js'
	export default {
		components: {
			swiper
		},
		data() {
			return {
				show: false,
				options: [{
					text: '退出',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				list: [],
				//分页
				params: {
					type: 1
				},
				content: ''
			};
		},
		methods: {
			handleClick(e) {

				uni.showModal({
					title: '',
					content: this.content,
					showCancel: true,
					cancelText: '取消',
					confirmText: '退出',
					confirmColor: '#e4393c',
					success: res => {
						if (res.confirm) {
							uni.showLoading()
							circle_operation({
								id: e.currentTarget.dataset.id,
								type: 2
							}).then(res => {
								uni.hideLoading()
								this.reload()
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {

				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {

			},
			scroll() {

			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				circle_operation(params).then(res => {
					this.content = res.data.text
					this.$refs.paging.complete(res.data.circle);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			reload() {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style lang="scss">
	.container {

		.cell {
			padding: 30rpx;
			border-bottom: 1px solid #f5f5f5;

			.text1 {
				font-size: 30rpx;
				font-weight: bold;
			}

			.text2 {
				font-size: 26rpx;
				color: #dfbe5e;
				margin: 10rpx 0;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.intro {
				display: -webkit-box;
				/* 关键属性 */
				-webkit-box-orient: vertical;
				/* 排列方向 */
				-webkit-line-clamp: 2;
				/* 显示行数 */
				overflow: hidden;
				/* 溢出隐藏 */
				text-overflow: ellipsis;
				/* 省略号 */
				word-break: break-word;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>